Migrating from Tiptap to TinyMCE: the Vue.js configuration

Selecting the right Rich Text Editor (RTE) relies on knowing both your project, and your customer’s needs. The variety of options available can make the choice difficult, especially if you’re a non-technical content creator aiming to create your own website. But, if you do make an error in your selection, don’t fear the consequences – you can switch from one RTE to another, even while working on a project.

For instance, if you’re using Tiptap, but are rapidly running out of time to develop a UI and functions yourself, you can change to another, out-of-the-box editor, to save time. This article shows you how to switch from Tiptap to TinyMCE within your Vue.js project.

The entire code for this tutorial at this GitHub repo, and the full deployment is on a dedicate Vue app.

What is a rich text editor?

A rich text editor is a component added to apps and websites that provides comprehensive text modification options beyond what would normally be available in a text area element. Using a rich text editor, you can embed multimedia files like images, videos, and audio.

It's separate from a text editor, meaning it provides more than text with basic style formatting including bold, italic, and underline. More advanced editors are considered What You See Is What You Get, pronounced “wiz-ee-wig” (WYSIWYG). WYSIWYG editors preview how the page looks when it’s live in a web browser.

What is TinyMCE?

TinyMCE is a popular WYSIWYG HTML editor designed to work with all types of websites and products. It integrates with frameworks and languages like React, Vue.js, and Svelte, and is available as a self-hosted package you can integrate into your website, or a Cloud version accessed through a CDN.

Why transition to TinyMCE?

There are plenty of WYSIWYG HTML editors available, but our TinyMCE Vue WYSIWYG editor offers multiple advantages:

• The available open-source plugins include automatic hyperlinks, autoresizing, color picking, and CSS imports.
• Paid plans offer Premium plugins, like PowerPaste, Advanced Templates, and Spell Checker Pro.
• Savings in development time and expenses (supported by customer case studies)

What’s Tiptap, and how does it work with Vue?

Tiptap is a framework-agnostic, headless wrapper around ProseMirror that allows you to build and customize your own RTE. GitLab, Nextcloud, and Apostrophe CMS (among others), make use of Tiptap to build their own RTE.

Vue.js is a progressive, open-source framework designed to build web interfaces as well as single-page apps for desktop and mobile. It works well with a variety of tooling (including Tiptap), but TinyMCE specifically offers a component for integrating with Vue.js.

Getting started with Vue

If you don’t have an existing Vue.js project, you can create one. This tutorial uses the Vue CLI.

1. Run the following command to install it:
   

   npm install -g @vue/cli

   COPY
2. Create a Vue.js project named vue-tiny-mce by running the following command in the terminal.
   

   vue create vue-tiny-mce

   COPY
3. When prompted, choose the Default (Vue 3) ([Vue 3] babel, eslint) preset.
   

   Vue CLI v4.5.15
   ? Please pick a preset:
   Default ([Vue 2] babel, eslint)
   > Default (Vue 3) ([Vue 3] babel, eslint)
   Manually select features

   COPY
4. After the project has been created, run the following command to start the development server.
   

   cd vue-tiny-mce
   npm run serve

   COPY
5. Head over to http://localhost:8080/ in your browser. Here is how your app will look:
   
   
   
   
   
6. Run the following command to install the Tiptap package:
   

   npm install @tiptap/vue-3 @tiptap/starter-kit

   COPY
7. Edit the App.vue file to add the Tiptap editor using the composition API and the useEditor method from Tiptap.
   

   <template>
     <h1>Tiptap Editor with VueJS</h1>
   
     <div id="editor">
   	<editor-content :editor="editor" />
     </div>
   </template>
   
   <script>
   import { useEditor, EditorContent } from "@tiptap/vue-3";
   import StarterKit from "@tiptap/starter-kit";
   
   export default {
     name: "App",
     components: {
   	EditorContent,
     },
   
     setup() {
   	const editor = useEditor({
     	content: "<h2>Hello World!</h1>",
     	extensions: [StarterKit],
   	});
   
   	return { editor };
     },
   };
   </script>
   
   <style scoped>
   #editor {
     border: 1px solid salmon;
   }
   p {
     margin: 1em 0;
   }
   </style>

   COPY

Here is how your app will look:

Migrating from Tiptap to TinyMCE

Now to make the switch from Tiptap to TinyMCE in your new Vue.js project, run the following commands:

1. Uninstall the Tiptap package from your Vue.js project:
   

   npm uninstall @tiptap/vue-3

   COPY
2. If you are using Vue 2, run this command to uninstall:
   

   npm uninstall @tiptap/vue-2

   COPY

   You might also need to run the following command to remove the tiptap-starter-kit:

   npm uninstall @tiptap/starter-kit

   COPY

3. Modify the Tiptap component or the App.vue file like this:

   <template></template>
   
   <script>
   export default {
     name: "App",
     components: {},
   };
   </script>
   
   <style>
   </style>

   COPY
4. Run the following command in your project’s root directory to start the development server:
   

   npm run serve

   COPY

5. Head to http://localhost:8080/ in your browser; you will see a blank screen since the App.vue file doesn’t have any components.

   Next install the tinymce-vue package. Run the following command in your project’s root directory:

   npm install --save "@tinymce/tinymce-vue@^4"

   COPY
6. You will need a TinyMCE API key to deploy the TinyMCE editor in your app. Here’s how to sign up for a FREE API key:

💡NOTE: To sign up for a FREE API key: Navigate to the TinyMCE registration page in the browser and create a free tiny.cloud account. You can use your GitHub or Google credentials to log in. Once you’ve logged in, copy the Tiny API key from your account dashboard.

Integrating TinyMCE with Vue.js app

To integrate TinyMCE with Vue.js: 

1. Now you’ll integrate TinyMCE with Vue.js. First update your App.vue file by replacing the value in the api-key field with your API key:

   <template>
     <h1>Vue TinyMCE Example</h1>
     <editor
   	api-key="your-api-key"
     />
   </template>
   
   <script>
   import Editor from "@tinymce/tinymce-vue";
   
   export default {
     name: "App",
     components: {
   	editor: Editor,
     },
   };
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

   COPY

2. Import the Editor component from the tinymce-vue package inside the script tags:

   import Editor from "@tinymce/tinymce-vue";
   
   export default {
     name: "App",
     components: {
       editor: Editor,
     },
   };
   

   COPY

3. Export the Editor component to the app:

   <editor api-key="your-api-key" />;
   

   COPY

   Make sure to update the api-key field in the above code with your own API key.

Configuring TinyMCE editor

Next you’ll customize and configure TinyMCE by adjusting the height, adding plugins, and other actions.

1. Update the TinyMCE Editor code to adjust the height of the editor on the app:

   <editor
   	api-key="your-api-key"
   	:init="{
     	height: 500,
   	}"
     />

   COPY

2. To remove the Menu Bar, set the menubar field to false by using the following code:

   <editor
   	api-key="your-api-key"
   	:init="{
     	height: 500,
     	menubar: false,
   	}"
     />

   COPY

3. Add different plugins to customize your app even further. For example, to add image support to the editor, update the code like this:

   <editor
   	api-key="your-api-key"
   	:init="{
     	height: 500,
     	menubar: false,
     	plugins: ['image '],
   	}"
     />

   COPY

Your app should now look like this:

TinyMCE offers multiple plugins to choose from so that you can add that extra edge to your editor, including autolink, lists, link, print, and preview. To see the available plugins, check the full list.

Comparing the Tiptap configuration to TinyMCE

Compared to TinyMCE, configuring the same settings in Tiptap can be a hassle, especially if you’re not from a programming background. To add image support, you’ll need separate functions and code to handle the entire process. 

Further, if you want to extend the image support to have resizable images, or floating images, the entire process can be difficult. Here’s an example:

<template>
  <div v-if="editor">
	<button @click="addImage">
  	add image from URL
	</button>
	<editor-content :editor="editor" />
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Image from '@tiptap/extension-image'
import Dropcursor from '@tiptap/extension-dropcursor'

export default {
  components: {
	EditorContent,
  },

  data() {
	return {
  	editor: null,
	}
  },

  methods: {
	addImage() {
  	const url = window.prompt('URL')

  	if (url) {
    	this.editor.chain().focus().setImage({ src: url }).run()
  	}
	},
  },

  mounted() {
	this.editor = new Editor({
  	extensions: [
    	Document,
    	Paragraph,
    	Text,
    	Image,
    	Dropcursor,
  	],
  	content: "",
	})
  },

  beforeUnmount() {
	this.editor.destroy()
  },
}
</script>

Exporting Your Data to TinyMCE from Tiptap

For your website’s database, you can easily import your data from the Tiptap editor to your TinyMCE editor. There are multiple ways to do this, but it depends on your configurations in Tiptap.

If you’re not using an external database and storing data on your own server that’s event-triggered, here’s how to export the data in JSON or HTML using Tiptap:

const json = editor.getJSON();
const html = editor.getHTML();

You might use events to send your Tiptap content to an external database via the API. In that case, you can easily replicate the configuration by using the TinyMCE Events plugin and sending the content of the editor in the API request to the database.

You can get that content with getContent(). Read more about this method in the TinyMCE documentation.

const editorContent = tinymce.activeEditor.getContent();

You can also specify the format of the content to get with this method. For example:

const editorContent = tinymce.activeEditor.getContent({ format: "text" });

What are the most common issues Tiptap users have?

The following are a list of some of the most common obstacles Tiptap users encounter when they’re using or building with the platform:

Keyboard shortcuts for strikethrough

The keyboard shortcut for strikethrough in TipTap is a ctrl + shift + x combination in the documentation, which at the time of writing in November 2023, has not yet been updated to reflect the most recent change to the strikethrough shortcut, which is to use the “s” key rather than “x”. This may present confusion about what shortcut to use.

Hex to RGB handling

Tiptap’s current handling of Hex-based colors is to convert them to RGB format. There are examples of the hex to RGB handling that describe the conversion issues. One suggested workaround for the conversion is running the isActive function.

Ordered lists

Some bugs can come up in regards to ordered lists in Tiptap. One example is how ordered lists interact with character count. In some cases, when list items are disabled, the Tiptap check carried out by the can command (editor.can().sinkListItem('listItem`)) can create errors when the editor initializes. You may need to add checks to determine if list items are a part of any extensions added to the editor.

Link insertion

Tiptap can run into issues with link insertion by copy and paste. The expected behavior of a link applied to text is that the HTML tagging for the link address converts the text into a hyperlink. In some cases, this doesn’t happen with Tiptap link insertion from copy paste. You may have to investigate how your link commands and link extensions are configured.

Image copy and paste

When customers select text and images from one location and copy them into the Tiptap editor, the image is brought along as well rather than filtered. Options to prevent images being inserted when copied over in content are a useful feature, but this is not a feature Tiptap provides out-of-the-box. Be prepared to develop an image filtering script or similar when configuring TipTap.

Final thoughts…

A high-quality rich text editor can make all the difference when building and deploying your web projects for content creators. Even non-technical team members can use it to work with and display WYSIWYG text, which simplifies and optimizes your workflow.

TinyMCE is an easy-to-use RTE that integrates with multiple frameworks and languages, giving you access to a variety of useful features even at the open-source, FREE level. (And that’s only one of the options from Tiny, which offers cloud-based solutions for content creation.)

If you’d like to try out the TinyMCE integration with Vue, remember to sign up for a free API key to get started.